<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<!-- My order details -->
		<div class="myOrderDetails m1280">My order details</div>
		<!-- 盒子 -->
		<div class="widBox m1280 f f-j-b">
			<!-- 头像 -->
			<div class="chat hand f f-a-c f-j-c f-d-c">
				<img src="/src/assets/tou.png" alt="" />
				<div class="chatName">Chat</div>
				<div class="chatTime">23:00</div>
			</div>
			<div>
				<div class="leftBox">
					<div class="title hand f f-a-c">
						{{ obj.descriptionTitle }}
						<img src="/src/assets/user/1.png" @click="statu = 2" v-if="statu == 1" class="setelImg" t="" />
						<img src="/src/assets/user/shang.png" style="width: 22px; height: 20px; margin-left: 5px" @click="statu = 1" v-else class="setelImg" t="" />
					</div>
					<div v-if="statu == 1" class="neiCount">
						{{ obj.descriptionDetail }}
					</div>
					<div class="avaBox f f-j-b">
						<div class="nickName">
							<div class="from">Order from</div>
							<div class="topic f f-a-c">
								<img :src="obj.sellerAvatar" alt="" />
								<div class="">
									<div class="name">{{ obj.sellerFirstName }} {{ obj.sellerLastName }}</div>
									<div class="f f-a-c">
										<div class="topics">Topics:</div>
										<div class="career" v-for="(item, index) in obj.sellerTopicNames" :key="index">{{ item }}</div>
										<!-- <div class="career">Big data</div>
										<div class="career">Career pivot</div> -->
									</div>
								</div>
							</div>
						</div>
						<div class="price">
							<div class="total">Total price</div>
							<div class="pricNum">${{ obj.totalPrice }}</div>
							<div @click="goView" class="viewIn hand">View invoice</div>
						</div>
					</div>
					<div class="xian"></div>
					<!-- Delivery date -->
					<div class="delivery">Delivery date</div>
					<!-- \Delivery date -->
					<div class="deliveryDate f f-j-b">
						<div class="leftDate f f-a-c">
							<img v-if="obj.meetingType == 1" src="/src/assets/8.png" class="assImg" alt="" />
							<img v-if="obj.meetingType == 2" src="/src/assets/7.png" class="assImg" alt="" />
							<div class="coun">
								<div class="counTop">
									{{ formatTimestamp(obj.startTime) }}
								</div>
								<div class="counTime">{{ timeHous(obj.startTime) }} - {{ timeHous(obj.endTime) }}</div>
							</div>
							<div class="coun">
								<div class="counTop">Duration</div>
								<div class="counTime">{{ obj.timeInterval || 0 }}</div>
							</div>
							<div class="coun">
								<div class="counTop">Meeting status</div>
								<div class="counTime">
									{{
										obj.status == 10 || obj.status == 20 || obj.status == 30 || obj.status == 40
											? "Upcoming"
											: (obj.status == 70 || obj.status == 60) && obj.reviewStatus
											? "reviewed"
											: obj.status == 70 || obj.status == 60
											? "completed"
											: obj.status == 40 || obj.status == 73 || obj.status == 76 || obj.status == 80
											? "cancel"
											: "pastorder"
									}}
								</div>
							</div>
						</div>
						<div v-if="obj.status == 30 || obj.status == 50" @click="enterMeeting" class="rightDate hand">Enter meeting</div>
					</div>
					<div class="xian"></div>
					<!-- yourOrder -->
					<div class="yourOrder">{{ formatTimestamps(obj.createTime) }}</div>
					<!--list -->
					<div class="listOrder f f-a-c f-j-b">
						<div class="lefName">Subtotal</div>
						<div class="price">${{ obj.price }}</div>
					</div>
					<div class="listOrder f f-a-c f-j-b">
						<div class="lefName">Service Fee</div>
						<div class="price">${{ obj.sellerServicePrice }}</div>
					</div>
					<div class="listOrder f f-a-c f-j-b">
						<div class="lefName">Total</div>
						<div class="price">${{ obj.totalPrice }}</div>
					</div>

					<!-- 按钮Alter price -->
					<div v-if="numQuery != 2" class="btnBox f f-a-c">
						<div class="btnC f f-a-c">
							<div @click.stop="goReschedule" v-if="obj.status == 10 || obj.status == 20 || obj.status == 30" class="btnAl hand">Reschedule</div>
							<div v-if="obj.status == 20" @click="goPay" style="margin-left: 15px" class="btnAl hand">Pay</div>
							<div v-if="obj.status == 10 || obj.status == 20 || obj.status == 30" @click.stop="qieShow" class="btnACan hand">Cancel order</div>
						</div>
					</div>
					<!-- 评论列表  v-if="obj.reviewStatus"-->
					<div class="commentList">
						<div class="review">Review</div>
						<!-- 这个是没有评论 -->
						<div v-if="!obj.buyerReview">
							<div class="f f-a-c f-j-b">
								<div class="viewList">How would you rate it?</div>
								<div class="xingxing f f-a-c">
									<div v-for="(item, index) in 5" @click.stop="xing(index)" :key="index" class="f f-a-c">
										<img v-show="index <= xingInd" src="/src/assets/user/14.png" class="xingImg" alt="" />
										<img v-show="index > xingInd" src="/src/assets/user/15.png" class="xingImg" alt="" />
									</div>
									<span style="margin-left: 5px; font-size: 12px" class=""> {{ xingInd + 1 }}.0/5.0 </span>
								</div>
							</div>
							<!-- 下面的评论 -->
							<div style="padding-top: 15px" class="textare">
								<a-textarea class="textarea" :maxlength="200" v-model:value="description" :auto-size="{ minRows: 5, maxRows: 5 }" placeholder="Autosize height based on content lines" />
								<div class="rigInp f f-a-c">
									<div @click="SubmitView()" class="submit hand">Submit</div>
								</div>
							</div>
						</div>
						<!-- 这个是有评论时候展示 -->
						<div v-else>
							<div class="oneBox">
								<!-- 一级评论 -->
								<div class="oneBoxTop f">
									<div class="avaert"><img :src="obj.buyerAvatar" alt="" /></div>
									<div class="avartCount">
										<div class="name">{{ obj.buyerReview.title }}</div>
										<div class="stars f f-a-c">
											<div class="xingxing f f-a-c">
												<img v-for="(ite, ind) in obj.buyerReview.score" :key="ind" src="/src/assets/user/14.png" class="xingImg" alt="" />
												<img v-for="(ite, ind) in 5 - obj.buyerReview.score" :key="ind" src="/src/assets/user/15.png" class="xingImg" alt="" />
												{{ obj.buyerReview.score }}.0
											</div>
											<div class="hengXian"></div>
											<div class="age">{{ getTimes(obj.buyerReview.createTime) }}</div>
											<div class="genin">{{ obj.buyerFirstName }} {{ obj.buyerLastName }}</div>
										</div>
										<div class="count">
											{{ obj.buyerReview.content }}
										</div>
									</div>
									<!-- <div @click="upDatatUploda" class="icon f f-a-c"><img src="/src/assets/user/6.png" class="iconImg" alt="" /> <span>Report</span></div> -->
								</div>
								<!-- 这个是二级评论 -->
								<div v-if="obj.sellerReview" class="towBoxTop f f-a-c">
									<div class="leftTop"></div>
									<!-- 右边的评论 -->
									<div class="boxRig f f-a-c">
										<div class="avacr"><img :src="obj.sellerAvatar" class="topImg" alt="" /></div>
										<div class="rigName">
											<div class="name">Heading</div>
											<div class="count">Thank you for your affirmation. I am very glad to help you. I hope we can contact you again sometime.</div>
											<div @click="upDatatUploda" class="icon f f-a-c"><img src="/src/assets/user/6.png" class="iconImg" alt="" /> <span>Report</span></div>
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="inputBox f f-a-c">
								<div class="rigInp f f-a-c">
									<input type="text" v-model="wriValue" name="" class="inpI" placeholder="Write your reply" id="" />
									<div class="submit hand">Submit</div>
								</div>
							</div> -->
						</div>
					</div>
				</div>
				<!-- 这个是列表 人物列表------------------- -->
				<div class="">
					<div class="recom">Recommend</div>
					<div class="headIng f f-w-w">
						<div v-for="(item, index) in recommList" :key="index" class="financialItem hand f-s">
							<div class="topAvatr">
								<div class="topSckr f f-a-c">
									<img src="/src/assets/Star.png" class="Star" alt="" />
									<div class="strNum">{{ item.level }}/5</div>
								</div>
								<div @click="goUserInfo" class="avatr f f-a-c">
									<div class="leftAva"><img :src="item.avatar || ''" class="avater" alt="" /></div>
									<div class="address">
										<div class="name">{{ item.firstName }}{{ item.lastName }}</div>
										<div class="cof">{{ item.position }}</div>
										<div class="addre f f-a-c f-j-c"><img src="/src/assets/address.png" class="imgAva" alt="" />{{ item.areaName }}</div>
									</div>
								</div>
								<!-- 下方的 -->
								<div class="topice f f-a-c f-w-w">
									<div class="topTit">Topics:</div>
									<!-- <div class="topiceBox">M&A</div> -->
									<div v-for="(ite, ind) in item.topicNames" :key="ind" class="topiceBox">{{ ite }}</div>

									<!-- <div class="topiceBox">Rental</div>
									<div class="topiceBox">Cooperate law</div>
									<div class="topiceBox">Cooperate law</div> -->
								</div>
							</div>
							<!-- count -->
							<div class="count">{{ item.myDescribe }}</div>
							<div class="btn">
								<ButtonDiffuse @click="goUserInfo(item, 1)" :name="'From $' + item.lowPrice" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="rigBox">
				<div class="topBox">
					<div class="topDet">Order details</div>
					<div class="orderBy f f-a-c f-j-b">
						<div class="le">Order by</div>
						<div class="ri">{{ obj.sellerFirstName }} {{ obj.sellerLastName }}</div>
					</div>
					<div class="orderBy f f-a-c f-j-b">
						<div class="le">Project</div>
						<div class="rig">{{ obj.industryName }}</div>
					</div>
					<div class="orderBy f f-a-c f-j-b">
						<div class="le">Order from</div>
						<div class="ri">{{ obj.buyerFirstName }} {{ obj.buyerLastName }}</div>
					</div>
					<div class="orderBy f f-a-c f-j-b">
						<div class="le">Delivery date</div>
						<div class="rig">{{ formatTimestamps(obj.createTime) }}</div>
					</div>
					<div class="orderBy f f-a-c f-j-b">
						<div class="le">Total price</div>
						<div class="rig">${{ obj.totalPrice }}</div>
					</div>
					<div class="orderBy f f-a-c f-j-b">
						<div class="le">Order number</div>
						<div class="rig">{{ obj.sn }}</div>
					</div>
					<div class="btnAn f f-a-c">
						<div @click="BuyItAgain" class="OrderAgain hand">Order again</div>
					</div>
				</div>
				<div class="botBox">
					<div class="suppot">Support</div>
					<div @click="goFAQ" class="hand faqs f f-a-c f-j-b">
						<div class="imgBox f f-a-c">
							<img src="/src/assets/user/wenhao.png" class="wenImg" t="" />
							<div class="faq">
								<div class="nameFaq">FAQs</div>
								<div class="answers">Find needed answers.</div>
							</div>
						</div>
						<img src="/src/assets/user/2.png" class="userJian" alt="" />
					</div>
					<div @click="goHelel" class="hand faqs f f-a-c f-j-b">
						<div class="imgBox f f-a-c">
							<img src="/src/assets/user/i.png" class="wenImg" t="" />
							<div class="faq">
								<div class="nameFaq">Resolution Center</div>
								<div class="answers">Resolve order issues.</div>
							</div>
						</div>
						<img src="/src/assets/user/2.png" class="userJian" alt="" />
					</div>
				</div>
				<div class="renwuBox">
					<div class="suppot">Recently viewed</div>
					<div v-for="(item, index) in recordList" :key="index" class="character f f-a-c f-j-b">
						<div class="chin f f-a-c">
							<img :src="item.avatar" class="imgTou" alt="" />
							<div class="nameBox">
								<div style="width: 250px" class="name f f-a-c f-j-b">
									<div>{{ item.firstName }} {{ item.lastName }}</div>
									<div class="rigXing f f-a-c"><img src="/src/assets/Star.png" alt="" />{{ item.level }}.0</div>
								</div>
								<div class="count">Entrepreneur</div>
								<div class="topcs f f-a-c">
									<div class="tops">Topics：</div>
									<div v-for="(ite, ind) in item.topicNames" :key="ind" class="starup">{{ ite }}</div>
									<!-- <div class="starup">HR</div>
									<div class="starup">Psychology</div>
									<div class="starup">Career Pivot</div> -->
								</div>
							</div>
						</div>
					</div>
					<!-- <div class="character botAdd f f-a-c f-j-b">
						<div class="chin f f-a-c">
							<img src="/src/assets/tou.png" class="imgTou" alt="" />
							<div class="nameBox">
								<div class="name f f-a-c">
									<div>Adde Jones</div>
									<div class="rigXing f f-a-c"><img src="/src/assets/Star.png" alt="" />4.8</div>
								</div>
								<div class="count">Entrepreneur</div>
								<div class="topcs f f-a-c f-w-w">
									<div class="tops">Topics</div>
									<div class="starup hand">Starup</div>
									<div class="starup hand">HR</div>
									<div class="starup hand">Psychology</div>
									<div class="starup hand">Career Pivot</div>
								</div>
							</div>
						</div>
					</div> -->
				</div>
			</div>
		</div>
		<!-- 删除 -->
		<el-dialog v-model="listVisibleDet" title="" width="400">
			<div class="dialogTitleDelete">Cancel order？</div>
			<div class="dialogTitCount">Cancellation will affect your overall rating, are you sure you want to do this?</div>
			<div class="dialogBtn f f-a-c f-j-b">
				<div @click="cancelOrder" class="lefBtn hand">YES</div>
				<div @click="listVisibleDet = false" class="rigBtn hand">NO</div>
			</div>
		</el-dialog>
		<upLoad @reportObj="reportObj" ref="upLoads" />
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { DetailsOfMyOrder, CancelAnOrder, PayOrder, AssociatedUserList, EnterTheMeeting, CustomerReviewOrder, CreateUserOrder, BuyerBrowsingHistory } from "@/api/xpert.js";
	import { formatTimestamp, timeHous, formatTimestamps, getTimes } from "@/utils/setting.js";
	import { ref, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import upLoad from "./upLoad.vue";
	import { ElMessage } from "element-plus";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import { useRoute } from "vue-router";
	let route = useRoute();
	// 获取上个页面传过来的参数
	let ind = localStorage.getItem("ind");
	let numQuery = route.query.num;
	let id = route.query.id;
	let listVisibleDet = ref(false);
	let statusTab = ref(1);
	let xingInd = ref(-1);
	let statu = ref(1);
	let upLoads = ref("");
	let description = ref("");
	let wriValue = ref("");
	let obj = ref({});
	let reportId = ref(""); //举报id
	let erpNUm = ref(1);
	let recordList = ref([]);
	let recommList = ref([]);
	onMounted(async () => {
		await initOj();
		await goBuyerBrowsingHistory();
		await goAssociatedUserList();
		window.addEventListener("scroll", handleScroll);
	});
	// 去时间预约
	const goUserInfo = (item = {}, num) => {
		// console.log(item, "111111111111111111");
		// return;
		router.push({
			path: "/UsePersonalHome",
			query: {
				userId: item.userId
			}
		});
	};
	// 买家再买一次
	const BuyItAgain = () => {
		router.push({
			path: "/PersonalHome",
			query: {
				userId: obj.value.sellerUserId
			}
		});
	};
	// 买家浏览记录
	const goBuyerBrowsingHistory = async () => {
		let n = await BuyerBrowsingHistory();
		recordList.value = n.data;
	};
	// 获取关联列表
	const goAssociatedUserList = async () => {
		let n = await AssociatedUserList({ sellerUserId: obj.value.sellerUserId });
		recommList.value = n.data;
	};
	// 举报请求
	const reportObj = async objs => {
		console.log();
		let n = await CreateUserOrder({
			reportUserIdentity: ind == 3 || ind == 6 ? "1" : "2",
			foreignId: obj.value.sellerReview.id,
			reportContent: objs.content,
			reportImages: objs.imgList
		});

		if (n.code == 200) {
			ElMessage.success(n.msg);
		}
		// }
		upLoads.value.upLoadVisible = false;
	};
	const upDatatUploda = () => {
		upLoads.value.upLoadVisible = true;
	};
	const xing = ind => {
		console.log(ind, "000000000000000");
		xingInd.value = ind;
	};
	const initOj = async () => {
		let n = await DetailsOfMyOrder({
			orderId: id
		});
		obj.value = n.data;
	};
	// 去pay
	const goPay = async () => {
		let n = await PayOrder({
			orderId: obj.value.id
		});
		// window.location.href = n.data;
		window.open(n.data);
	};
	// 去评价
	const SubmitView = async () => {
		let n = await CustomerReviewOrder({
			orderId: obj.value.id,
			content: description.value,
			score: xingInd.value + 1
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
			initOj();
		}
	};
	const goReschedule = () => {
		router.push({
			path: "/UseCustomizeOrderTime",
			query: {
				act: 3,
				userId: obj.value.sellerUserId,
				descriptionTitle: obj.value.descriptionTitle,
				descriptionDetail: obj.value.descriptionDetail,
				meetingType: obj.value.meetingType,
				orderId: obj.value.id
			}
		});
	};
	// 跳转到FAQ
	const goFAQ = () => {
		router.push({
			path: "/BlogFAQ"
		});
	};
	// 跳转到帮助
	const goHelel = () => {
		router.push({
			path: "/HelpSupport",
			query: {
				act: 1
			}
		});
	};
	// 进入会议链接
	const enterMeeting = async () => {
		let n = await EnterTheMeeting({
			orderId: id
		});
		// return;
		if (n.code == 200) {
			window.open(n.data);
		}
	};
	// 点击取消
	const cancelOrder = async () => {
		let n = await CancelAnOrder({ orderId: id });
		if (n.code == 200) {
			ElMessage.success(n.msg);
			setTimeout(() => {
				router.go(-1);
			}, 1000);
		}
	};

	// 点击变为true
	const qieShow = item => {
		listVisibleDet.value = true;
	};
	// 去打印页面
	const goView = () => {
		router.push({
			path: "/Print",
			query: {
				id: id
			}
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
